<template>
  <div class="banner">
    <el-carousel height="680px" arrow="never">
      <el-carousel-item v-for="item in bannerList" :key="item._id">
        <div
          :style="{
            height: '680px',
            background: `#051630 url(${item.carousel}) no-repeat center/cover`
          }"
        ></div>
      </el-carousel-item>
    </el-carousel>
    <div class="bottom-box w1160 flex">
      <img :src="$utils.getImg('logo-tips')" width="76" height="70" alt="logo-tips" />
      <p class="tips fz20">
        橙券，是权益营销方案提供商，为实现品牌-市场-用户的紧密互联提供强有力的智慧支持
      </p>
      <BtnMore></BtnMore>
    </div>
  </div>
</template>

<script setup>
import { getBannerList } from '@/api/banner'
import BtnMore from './btn-more.vue'
import { ref, onMounted } from 'vue'
defineOptions({
  name: 'CqBanner',
  components: {
    BtnMore
  }
})
const bannerList = ref([])
const getBanner = async () => {
  const { data } = await getBannerList()
  bannerList.value = data
}
onMounted(() => {
  getBanner()
})
</script>

<style lang="scss" scoped>
.banner {
  position: relative;
  .bottom-box {
    position: absolute;
    bottom: -80px;
    left: 150px;
    justify-content: center;
    align-items: center;
    padding: 24px 36px;
    z-index: 10000;
    background-color: #fff;
    box-shadow: 0 8px 8px #f1f1f1;
    .tips {
      padding: 0 50px 0 42px;
      line-height: 70px;
    }
  }
  :deep(.el-carousel__indicators--horizontal) {
    bottom: 50px !important;
  }
}
</style>
